<template>
  <div class="rankinglist">
    <header>
      <p>
        <router-link to="/">《</router-link>
      </p>
      <p>经纪人</p>
      <p>
        <span>...</span>
        <span>o</span>
      </p>
    </header>
    <main>
      <form>
        <van-search v-model="value" @input="rankingsearch(value)" placeholder="请输入搜索关键词" />
      </form>
      <div class="No1">
        <dl v-for="(item, index) in newsList.slice(0,3)" :key="index">
          <dt>
            <img :src="item.img" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
      <div class="No1list">
        <dl v-for="(item, index) in newsList.slice(3,100)" :key="index">
          <dd>
            <p>{{item.id}}</p>
          </dd>
          <dt>
            <img :src="item.img" alt />
          </dt>
          <dd>
            <p>{{item.name}}</p>
            <p>{{item.companyname}}</p>
          </dd>
          <h2>
            <i class="el-icon-chat-dot-round"></i>
            <i class="el-icon-phone"></i>
          </h2>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import { newsList } from "../../../../api/index";
import axios from "axios";

export default {
  data() {
    return {
      value: "",
      newsList: []
    };
  },
  created() {
    this.newslist();
  },
  methods: {
    //排行渲染
    newslist() {
      newsList().then(res => {
        if (res.data.code === 0) {
          this.$router.push("/login");
          this.$toast(res.data.msg);
        } else {
          this.newsList = res.data.data;
        }
      });
    },

    //搜索
    rankingsearch(value) {
      axios({
        url: "/api/rankingsearch",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        this.newsList = res.data.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.rankinglist {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 60px;
    background-color: rgb(34, 100, 177);
    color: #fff;

    p:first-child {
      a {
        color: #fff;
      }
    }
    p:nth-child(3) {
      border: 1px solid rgb(226, 226, 226);
      width: 60px;
      height: 26px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  main {
    flex: 1;
    overflow-y: scroll;
    form {
      width: 100%;
      background-color: rgb(218, 132, 132);

      .van-search {
        margin: 0 auto;
        width: 90%;
        height: 40px;
        background-color: none;
        border-radius: 14px;
      }
    }

    .No1 {
      width: 100%;
      height: 200px;
      background-color: rgb(218, 132, 132);
      background-image: url("../../../../images/排行榜.jpg");
      background-size: 100%;
      display: flex;
      justify-content: space-evenly;
      // align-items: baseline;
      dl {
        margin-top: 90px;
        dt {
          img {
            width: 50px;
            height: 50px;
            border-radius: 50px;
          }
        }
        dd {
          margin-top: 20px;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
    .No1list {
      margin-top: 20px;
      dl {
        display: flex;
        align-items: center;
        margin-top: 5px;
        border-bottom: 1px solid rgb(197, 197, 197);
        dt {
          padding-left: 14px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50px;
          }
        }
        dd {
          padding-left: 14px;
          p {
            font-size: 14px;
            font-weight: bold;
          }
        }
        h2 {
          padding-left: 80px;
          i {
            padding-left: 16px;
            color: rgb(226, 141, 141);
          }
        }
      }
    }
  }
}
</style>